<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="10" :offset="4">
        <div v-for="item in list" :key="item.articleid">
          <QuestionCard
            :artcleId="item.articleid"
            :artcleTitle="item.articletitle"
            :articleText="item.articlecontent"
            :commentCount="item.replycount"
            :createDate="item.createtime"
            :likeCount="item.likecount"
            :userId="item.userid"
          ></QuestionCard>
        </div>
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="countTotal"
          >
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="5">
        <TotalCard></TotalCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import QuestionCard from "./QuestionCard.vue";
import TotalCard from "./TotalCard.vue";
export default {
  created() {
    this.initPageSizeAndPageIndex();
    this.getArticleByPage();
  },
  components: {
    QuestionCard,
    TotalCard,
  },
  data() {
    return {
      count: 0,
      pageIndex: 1, //当前页
      pageSize: 5, //页大小
      countTotal: 0, //总条数
      list: [], //文章列表
    };
  },
  computed: {},
  methods: {
    //获取分页数据
    getArticleByPage() {
      this.$request.postHttp({
        url: "/article/articleListByPage",
        data: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        },
        success: (data) => {
          this.list = data.list;
          this.countTotal = data.countTotal;
        },
        error: (error) => {},
      });
    },
    //页面大小改变
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getArticleByPage();
      localStorage.setItem("pageSize", pageSize);
    },
    //当前页改变
    handleCurrentChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.getArticleByPage();
      localStorage.setItem("pageIndex", pageIndex);
    },
    //初始化页面参数
    initPageSizeAndPageIndex() {
      // 从 localStorage 中获取 pageIndex
      const storedPageIndex = localStorage.getItem("pageIndex");

      // 从 localStorage 中获取 pageSize
      const storedPageSize = localStorage.getItem("pageSize");

      // 判断是否存在 pageIndex，并设置默认值
      this.pageIndex = storedPageIndex
        ? parseInt(storedPageIndex, 10)
        : this.pageIndex;

      // 判断是否存在 pageSize，并设置默认值
      this.pageSize = storedPageSize
        ? parseInt(storedPageSize, 10)
        : this.pageSize;
    },
  },
};
</script>

<style scoped>
</style>